<html lang="en">

<head>
  <style>
    html {
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto
    }

    html,
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      background-color: rgb(54, 50, 119);
      align-items: center;
      justify-content: center;
      color: #fafafa;
    }

    .loading {
      text-align: center;
    }
  </style>

</head>

<body>
  <div class="loading">
    <div>
      <img
        src="" />
      <img
        src="" />
    </div>
    <h3>Loading &laquo; dropdown - navbar &raquo; demo</h3>
  </div>
  <form id="mainForm" method="post" action="https://stackblitz.com/run?file=app/dropdown-navbar.ts" target="_self">
    <input type="hidden" name="project[template]" value="angular-cli">
    <input type="hidden" name="project[title]" value="ng-bootstrap demo - Dropdown - Navbar">
    <input type="hidden" name="project[description]"
      value="Example usage of the dropdown widget from https://ng-bootstrap.github.io">
    <input type="hidden" name="project[dependencies]" value="{&#34;@angular/animations&#34;:&#34;^15.0.0&#34;,&#34;@angular/core&#34;:&#34;^15.0.0&#34;,&#34;@angular/common&#34;:&#34;^15.0.0&#34;,&#34;@angular/compiler&#34;:&#34;^15.0.0&#34;,&#34;@angular/compiler-cli&#34;:&#34;^15.0.0&#34;,&#34;@angular/platform-browser&#34;:&#34;^15.0.0&#34;,&#34;@angular/platform-browser-dynamic&#34;:&#34;^15.0.0&#34;,&#34;@angular/router&#34;:&#34;^15.0.0&#34;,&#34;@angular/forms&#34;:&#34;^15.0.0&#34;,&#34;@angular/localize&#34;:&#34;^15.0.0&#34;,&#34;@ng-bootstrap/ng-bootstrap&#34;:&#34;14.2.0&#34;,&#34;@popperjs/core&#34;:&#34;2.11.6&#34;,&#34;rxjs&#34;:&#34;~7.5.5&#34;,&#34;typescript&#34;:&#34;~4.8.4&#34;,&#34;zone.js&#34;:&#34;~0.11.4&#34;}">
    
    <input type="hidden" name="project[tags][]" value="angular">
    
    <input type="hidden" name="project[tags][]" value="bootstrap">
    
    <input type="hidden" name="project[tags][]" value="ng-bootstrap">
    
    <input type="hidden" name="project[tags][]" value="dropdown">
    
    
    <input type="hidden" name="project[files][src/polyfills.ts]" value="/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called &#34;evergreen&#34; browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari &gt;= 10, Chrome &gt;= 55 (including Opera),
 * Edge &gt;= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import &#39;zone.js&#39;; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import &#39;@angular/localize/init&#39;;
">
    
    <input type="hidden" name="project[files][tsconfig.json]" value="{
	&#34;compileOnSave&#34;: false,
	&#34;compilerOptions&#34;: {
		&#34;baseUrl&#34;: &#34;./&#34;,
		&#34;outDir&#34;: &#34;./dist/out-tsc&#34;,
		&#34;sourceMap&#34;: true,
		&#34;declaration&#34;: false,
		&#34;downlevelIteration&#34;: true,
		&#34;experimentalDecorators&#34;: true,
		&#34;moduleResolution&#34;: &#34;node&#34;,
		&#34;importHelpers&#34;: true,
		&#34;target&#34;: &#34;es2020&#34;,
		&#34;module&#34;: &#34;es2020&#34;,
		&#34;typeRoots&#34;: [&#34;node_modules/@types&#34;],
		&#34;lib&#34;: [&#34;es2020&#34;, &#34;dom&#34;]
	},
	&#34;angularCompilerOptions&#34;: {
		&#34;enableIvy&#34;: true,
		&#34;fullTemplateTypeCheck&#34;: true,
		&#34;strictTemplates&#34;: true,
		&#34;strictInjectionParameters&#34;: true
	}
}
">
    
    <input type="hidden" name="project[files][angular.json]" value="{
	&#34;version&#34;: 1,
	&#34;newProjectRoot&#34;: &#34;projects&#34;,
	&#34;projects&#34;: {
		&#34;demo&#34;: {
			&#34;root&#34;: &#34;&#34;,
			&#34;sourceRoot&#34;: &#34;src&#34;,
			&#34;projectType&#34;: &#34;application&#34;,
			&#34;prefix&#34;: &#34;app&#34;,
			&#34;schematics&#34;: {},
			&#34;architect&#34;: {
				&#34;build&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:browser&#34;,
					&#34;options&#34;: {
						&#34;outputPath&#34;: &#34;dist/demo&#34;,
						&#34;index&#34;: &#34;src/index.html&#34;,
						&#34;main&#34;: &#34;src/main.ts&#34;,
						&#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
						&#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
						&#34;assets&#34;: [],
						&#34;styles&#34;: [],
						&#34;scripts&#34;: []
					},
					&#34;configurations&#34;: {
						&#34;production&#34;: {
							&#34;fileReplacements&#34;: [{}],
							&#34;optimization&#34;: true,
							&#34;outputHashing&#34;: &#34;all&#34;,
							&#34;sourceMap&#34;: false,
							&#34;extractCss&#34;: true,
							&#34;namedChunks&#34;: false,
							&#34;aot&#34;: true,
							&#34;extractLicenses&#34;: true,
							&#34;vendorChunk&#34;: false,
							&#34;buildOptimizer&#34;: true
						}
					}
				},
				&#34;serve&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:dev-server&#34;,
					&#34;options&#34;: {
						&#34;browserTarget&#34;: &#34;demo:build&#34;
					},
					&#34;configurations&#34;: {
						&#34;production&#34;: {
							&#34;browserTarget&#34;: &#34;demo:build:production&#34;
						}
					}
				},
				&#34;extract-i18n&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:extract-i18n&#34;,
					&#34;options&#34;: {
						&#34;browserTarget&#34;: &#34;demo:build&#34;
					}
				},
				&#34;test&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:karma&#34;,
					&#34;options&#34;: {
						&#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
						&#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
						&#34;styles&#34;: [],
						&#34;scripts&#34;: [],
						&#34;assets&#34;: []
					}
				},
				&#34;lint&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:tslint&#34;,
					&#34;options&#34;: {
						&#34;tsConfig&#34;: [&#34;tsconfig.json&#34;],
						&#34;exclude&#34;: [&#34;**/node_modules/**&#34;]
					}
				}
			}
		}
	},
	&#34;defaultProject&#34;: &#34;demo&#34;
}
">
    
    <input type="hidden" name="project[files][src/index.html]" value="&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;ng-bootstrap demo - Dropdown - Navbar&lt;/title&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&#34; /&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css&#34; /&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.css&#34; /&gt;
  &lt;style&gt;
    /* Sortable table demo */

th[sortable] {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

th[sortable].desc:before,
th[sortable].asc:before {
	content: &#39;&#39;;
	display: block;
	background: url(&#39;&#39;)
		no-repeat;
	background-size: 22px;
	width: 22px;
	height: 22px;
	float: left;
	margin-left: -22px;
}

th[sortable].desc:before {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
}

/* Filtering table demo */
ngbd-table-filtering span.ngb-highlight {
	background-color: yellow;
}

/* Complete table demo */
ngbd-table-complete span.ngb-highlight {
	background-color: yellow;
}

ngb-carousel .picsum-img-wrapper {
	position: relative;
	height: 0;
	padding-top: 55%; /* Keep ratio for 900x500 images */
}

ngb-carousel .picsum-img-wrapper &gt; img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class=&#34;container-fluid&#34;&gt;

    &lt;hr&gt;

    &lt;p&gt;
      This is a demo example forked from the &lt;strong&gt;ng-bootstrap&lt;/strong&gt; project: Angular powered Bootstrap.
      Visit &lt;a href=&#34;https://ng-bootstrap.github.io/&#34; target=&#34;_blank&#34;&gt;https://ng-bootstrap.github.io&lt;/a&gt; for more
      widgets and demos.
    &lt;/p&gt;

    &lt;hr&gt;
    &lt;ngbd-dropdown-navbar&gt;&lt;/ngbd-dropdown-navbar&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
">
    
    <input type="hidden" name="project[files][src/main.ts]" value="import &#39;./polyfills&#39;;
import {bootstrapApplication} from &#39;@angular/platform-browser&#39;;
import {NgbdDropdownNavbar} from &#39;./app/dropdown-navbar&#39;;

bootstrapApplication(NgbdDropdownNavbar)
.then(ref =&gt; {
  // Ensure Angular destroys itself on hot reloads.
  if (window[&#39;ngRef&#39;]) {
    window[&#39;ngRef&#39;].destroy();
  }
  window[&#39;ngRef&#39;] = ref;

  // Otherwise, log the boot error
})
.catch(err =&gt; console.error(err));
">
    
    <input type="hidden" name="project[files][src/app/dropdown-navbar.html]" value="&lt;p&gt;
	By design, dropdowns are always positioned dynamically via
	&lt;a routerLink=&#34;/positioning&#34; fragment=&#34;dropdown&#34;&gt;placement&lt;/a&gt;
	except when used inside navbar elements. To gracefully display them properly on small screens, they are rendered in
	the html as block elements.
&lt;/p&gt;
&lt;p&gt;
	In order to align a dropdown in a navbar to the right while still keeping correct behavior when the navbar is
	collapsed,
	&lt;a href=&#34;https://getbootstrap.com/docs/5.1/components/dropdowns/#responsive-alignment&#34;&gt;the responsive CSS classes&lt;/a&gt;
	(for example &lt;code&gt;dropdown-menu-end&lt;/code&gt;) must be added to the dropdown menu. The second dropdown in this example
	illustrates it.
&lt;/p&gt;
&lt;p&gt;
	If completely custom placement of a dropdown in a navbar is needed, then it is only possible if the
	&lt;code&gt;display&lt;/code&gt; property is explicitlyset to &#34;dynamic&#34;. The third dropdown in this example illustrates this.
&lt;/p&gt;
&lt;p&gt;
	Beware however that this breaks the positioning of the dropdown when the navbar is expanded on small displays. You can
	see the difference between the behavior of the first dropdowns (with a static display) and the last one (with a
	dynamic display) if you use this demo on a small resolution.
&lt;/p&gt;
&lt;p&gt;
	To have dynamic positioning along with correct behavior on smaller displays, the value of the &lt;code&gt;display&lt;/code&gt;
	property should be dynamically set based on the screen resolution. This is left as an exercise to the reader.
&lt;/p&gt;

&lt;nav class=&#34;navbar navbar-expand-md navbar-light bg-light&#34;&gt;
	&lt;div class=&#34;container-fluid&#34;&gt;
		&lt;span class=&#34;navbar-brand&#34;&gt;Dropdowns in navbar&lt;/span&gt;
		&lt;button
			class=&#34;navbar-toggler&#34;
			type=&#34;button&#34;
			aria-controls=&#34;navbarContent&#34;
			[attr.aria-expanded]=&#34;!collapsed&#34;
			aria-label=&#34;Toggle navigation&#34;
			(click)=&#34;collapsed = !collapsed&#34;
		&gt;
			&lt;span class=&#34;navbar-toggler-icon&#34;&gt;&lt;/span&gt;
		&lt;/button&gt;

		&lt;div class=&#34;navbar-collapse&#34; [class.collapse]=&#34;collapsed&#34; id=&#34;navbarContent&#34;&gt;
			&lt;ul class=&#34;navbar-nav ms-auto&#34;&gt;
				&lt;li class=&#34;nav-item&#34; ngbDropdown&gt;
					&lt;a class=&#34;nav-link&#34; tabindex=&#34;0&#34; ngbDropdownToggle id=&#34;navbarDropdown1&#34; role=&#34;button&#34;&gt; Static &lt;/a&gt;
					&lt;div ngbDropdownMenu aria-labelledby=&#34;navbarDropdown1&#34; class=&#34;dropdown-menu&#34;&gt;
						&lt;a ngbDropdownItem href=&#34;#&#34; (click)=&#34;$event.preventDefault()&#34;&gt;Action&lt;/a&gt;
						&lt;a ngbDropdownItem href=&#34;#&#34; (click)=&#34;$event.preventDefault()&#34;&gt;Another action&lt;/a&gt;
						&lt;a ngbDropdownItem href=&#34;#&#34; (click)=&#34;$event.preventDefault()&#34;&gt;Something else here&lt;/a&gt;
					&lt;/div&gt;
				&lt;/li&gt;

				&lt;li class=&#34;nav-item&#34; ngbDropdown&gt;
					&lt;a class=&#34;nav-link&#34; tabindex=&#34;0&#34; ngbDropdownToggle id=&#34;navbarDropdown2&#34; role=&#34;button&#34;&gt; Static right &lt;/a&gt;
					&lt;div ngbDropdownMenu aria-labelledby=&#34;navbarDropdown2&#34; class=&#34;dropdown-menu dropdown-menu-end&#34;&gt;
						&lt;a ngbDropdownItem href=&#34;#&#34; (click)=&#34;$event.preventDefault()&#34;&gt;Action&lt;/a&gt;
						&lt;a ngbDropdownItem href=&#34;#&#34; (click)=&#34;$event.preventDefault()&#34;&gt;Another action&lt;/a&gt;
						&lt;a ngbDropdownItem href=&#34;#&#34; (click)=&#34;$event.preventDefault()&#34;&gt;Something else here&lt;/a&gt;
					&lt;/div&gt;
				&lt;/li&gt;

				&lt;li class=&#34;nav-item&#34; ngbDropdown display=&#34;dynamic&#34; placement=&#34;bottom-end&#34;&gt;
					&lt;a class=&#34;nav-link&#34; tabindex=&#34;0&#34; ngbDropdownToggle id=&#34;navbarDropdown3&#34; role=&#34;button&#34;&gt; Dynamic &lt;/a&gt;
					&lt;div ngbDropdownMenu aria-labelledby=&#34;navbarDropdown3&#34; class=&#34;dropdown-menu&#34;&gt;
						&lt;a ngbDropdownItem href=&#34;#&#34; (click)=&#34;$event.preventDefault()&#34;&gt;Action&lt;/a&gt;
						&lt;a ngbDropdownItem href=&#34;#&#34; (click)=&#34;$event.preventDefault()&#34;&gt;Another action&lt;/a&gt;
						&lt;a ngbDropdownItem href=&#34;#&#34; (click)=&#34;$event.preventDefault()&#34;&gt;Something else here&lt;/a&gt;
					&lt;/div&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/nav&gt;
">
    
    <input type="hidden" name="project[files][src/app/dropdown-navbar.ts]" value="import { Component } from &#39;@angular/core&#39;;
import { NgbDropdownModule } from &#39;@ng-bootstrap/ng-bootstrap&#39;;

@Component({
	selector: &#39;ngbd-dropdown-navbar&#39;,
	standalone: true,
	imports: [NgbDropdownModule],
	templateUrl: &#39;./dropdown-navbar.html&#39;,
})
export class NgbdDropdownNavbar {
	collapsed = true;
}
">
    
  </form>
  <script>document.getElementById("mainForm").submit();</script>
</body>

</html>
